<!-- 定时盘点 -->
<template>
	<card :cardHeight="cardHeight" cardTitle="盘点统计" @showDetails="showDetails()">
		<!-- <v-chart :loading="loading" :option="option_column" style="height: 100%;padding-bottom: 10px;" autoresize ref="vchart" @click="handleClick"></v-chart> -->
		<Chart :optionData="option_column" style="height: 100%; padding-bottom: 10px"></Chart>
		<count-cattleList-modal ref="countCattleListModal"></count-cattleList-modal>
	</card>
</template>

<script>
let color = ['#30CAD3', '#FFB958', '#FAA53B'];
import countCattleListModal from '../module/countCattleListModal.vue';
import StatisticsMixins from '../StatisticsMixins';
import { mortgageapi } from '@/api/index.js';
export default {
	name: 'countCattle',
	mixins: [StatisticsMixins],
	components: { countCattleListModal },
	data() {
		return {
			loading: true,
			info: {},
			option_column: {
				color: color,
				title: {
					text: '0',
					subtext: '{subname|盘点总数}',
					x: 'center',
					y: 'center',
					itemGap: 0,
					textStyle: {
						fontSize: 40
					},
					subtextStyle: {
						rich: {
							subname: {
								fontSize: 16,
								color: '#7E848A',
								padding: [-20, 0, 0, 0]
							}
						}
					}
				},
				tooltip: {
					show: true
				},
				toolbox: {
					show: false
				},
				legend: {
					show: true,
					icon: 'circle',
					top: 'bottom',
					data: ['未盘点', '已盘点'],
					itemWidth: 12,
					itemHeight: 12,
					textStyle: {
						fontSize: 15,
						fontWeight: 'bold'
					}
				},
				series: {
					name: '',
					type: 'pie',
					clockWise: false,
					radius: ['45%', '45%'],
					hoverAnimation: false,
					itemStyle: {
						normal: {
							label: {
								show: false,
								position: 'outside',
								overflow: 'none',
								color: 'inherit',
								align: 'center',
								rich: {
									a1: {
										align: 'center',
										padding: [-20, 0, 10, 0],
										fontSize: 14,
										color: '#7E848A'
									},
									green: { color: '#06706C', fontSize: 16, fontWeight: 'bold', padding: [0, 10, -20, 0] }
								},
								formatter: '{a1|{b}：}\n{green|{c}头}'
							},
							labelLine: {
								length: 30,
								length2: 10,
								show: true,
								lineStyle: {
									width: 1,
									color: '#7E848A'
								}
							},
							borderColor: '#fff'
							// borderWidth: 3,
						}
					},
					data: []
				}
			}
		};
	},

	props: {
		pageScale: {
			type: [String, Number],
			default: 1
		},
		type: {
			type: String,
			default: 'head'
		}
	},
	watch: {
		pageScale: {
			handler(newValue, oldValue) {
				if (newValue && newValue != oldValue) {
					let pageScale = newValue;
					let option_column = { ...this.option_column };
					option_column.title.textStyle.fontSize = 40 * pageScale;
					option_column.title.subtextStyle.rich.subname.fontSize = 16 * pageScale;
					option_column.series.itemStyle.normal.label.rich.a1.fontSize = 14 * pageScale;
					option_column.series.itemStyle.normal.label.rich.a1.padding = [-25 * pageScale, 0, 1 * pageScale, 0];
					option_column.series.itemStyle.normal.label.rich.green.fontSize = 16 * pageScale;
					option_column.series.itemStyle.normal.label.rich.green.padding = [0, 10, -15 * pageScale, 0];
					option_column.legend.textStyle.fontSize = 14 * this.pageScale;
					for (var i = 0; i < option_column.series.data.length; i++) {
						let item = option_column.series.data[i];
						item.itemStyle.normal.borderWidth = 30 * pageScale;
						option_column.series.data[i] = item;
					}
					this.option_column = { ...option_column };
				}
			},
			immediate: true
		}
		// type: {
		//   handler(newValue, oldValue) {
		//     if (newValue != oldValue) {
		//       let pageScale = newValue;
		//       let option_column = { ...this.option_column };
		//       option_column.series.radius = this.type == 'head' ? ['50%', '50%'] : ['35%', '35%'];
		//       this.option_column = { ...option_column };
		//     }
		//   },
		//   immediate: true,
		// },
	},
	methods: {
		getInfo() {
			this.loading = true;
			this.$postAction(mortgageapi.echartsUrl.setpointCount + '?orgId=' + this.globalOrgId)
				.then(da => {
					if (da.code == 1) {
						this.info = { ...da.data };
						let data1 = [
							{
								value: da.data.inventoryCount,
								name: '已盘点',
								pecent: da.data.inventoryPercentage
							},
							{
								value: da.data.unInventoryCount,
								name: '未盘点',
								pecent: da.data.unInventoPercentage
							}
						];
						for (let i = 0; i < data1.length; i++) {
							data1[i] = {
								...data1[i],
								itemStyle: {
									normal: {
										borderWidth: 30 * this.pageScale,
										borderColor: color[i],
										shadowColor: color[i]
									}
								}
							};
						}
						let option_column = { ...this.option_column };

						option_column.title.text = da.data.totalCount;
						option_column.series.data = [...data1];
						option_column.legend.formatter = function (name) {
							console.log(name);
							let data = option_column.series.data;
							let pecent = '';
							let tarValue = 0;
							for (let i = 0, l = data.length; i < l; i++) {
								if (data[i].name == name) {
									tarValue = data[i].value;
									pecent = data[i].pecent;
								}
							}
							console.log(name + '' + ' ' + tarValue + '');
							return name + '' + ' ' + tarValue + '头' + ' ' + pecent;
						};
						this.option_column = { ...option_column };
						console.log(this.option_column);
					}
				})
				.finally(() => {
					this.loading = false;
				});
		},
		/* 查询的是最新的盘点信息 如果有临时手动盘点，数据会合并临时盘点的盘点信息 */
		showDetails() {
			this.$router.push({
				path: '/regulation/setPoint/farmPoint',
				query: Object.assign(
					this.globalOrgId
						? {
								orgId: this.globalOrgId
						  }
						: {}
				)
			});
		},
		// showDetails(countedStatus) {
		// 	this.$router.push('/dashboard/farmStatisticslist');

		// 	// this.$refs.countCattleListModal.show(
		// 	// 	{
		// 	// 		orgId: this.globalOrgId,
		// 	// 		batchNum: this.info.batchNum, // 根据上一个接口返回的批次号，查盘点的详情信息
		// 	// 		countedStatus
		// 	// 	},
		// 	// 	countedStatus == 'N' ? 1 : countedStatus == 'Y' ? 0 : ''
		// 	// );
		// },
		handleClick(param) {
			console.log('param', param);
			// this.showDetails(param.dataIndex == 1 ? 'N' : 'Y');
		}
	}
};
</script>
